<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <ul>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
        <li>第6个</li>
        <li>第7个 台下这个敲代码的人真帅啊</li>
        <li>第8个</li>
        <li>第9个</li>
        <li>第10个</li>
    </ul>
    <script>
        $("li:odd").css("backgroundColor","red")    //下标奇数
        $("li:even").css("backgroundColor","yellow")//下标偶数

        $("li:nth-child(2n-1)").css("backgroundColor","green")
        $("li:nth-child(2n)").css("backgroundColor","gold")

        $("li:first").css("backgroundColor","skyblue")
        $("li:last").css("backgroundColor","yellowgreen")

        $("li:lt(3)").css("backgroundColor","red")
        $("li:gt(3)").css("backgroundColor","blue")

        $("li:eq(3)").css("backgroundColor","brown")

        $("li:contains(帅)").css("backgroundColor","purple")  
    </script>
</body>
</html>